<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="organizationQueryVo.title" placeholder="机构名"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <router-link to="/information/addOrganization">
        <el-button type="primary">添加机构</el-button>
      </router-link>

      <el-button type="primary" @click="handleExport">导出机构数据</el-button>

    </el-form>

    <!--数据显示列表-->
    <el-table :data="dataList" fit highlight-current-row>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          {{pageSize * (currentPage - 1) + scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="课程编号" width="80" ></el-table-column>
      <el-table-column label="机构图片" >
        <template slot-scope="scope">
          <div class="pic">
            <img :src="'http://rj0158yod.hd-bkt.clouddn.com/' + scope.row.image"  width="150px">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="机构名称" width="80" ></el-table-column>
      <el-table-column prop="name" label="负责人姓名" width="80" ></el-table-column>
      <el-table-column prop="tel" label="电话" width="80" ></el-table-column>
      <el-table-column prop="address" label="机构地址" width="80" ></el-table-column>
      <el-table-column prop="status" label="状态" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="handleChangeStatus($event, scope.row.id)"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="'1'"
            :inactive-value="'0'"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <router-link :to="'/information/editOrganization/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>
import organization from '../../../api/organization'
import fileDownload from 'js-file-download'
import axios from 'axios'

export default {
  // 必须使用方法，需要给返回值
  data(){
    return{
      currentPage: 1,            // 当前页
      pageSize: 2,               // 每页记录数
      dataList: [],              // 分页数据
      total: 0,                  // 总记录数
      organizationQueryVo: {}
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList(value){
      if(value == -1){
        this.currentPage = 1;
      }
      organization.getList(this.currentPage, this.pageSize, this.organizationQueryVo).then(res => {
        console.log(res.data);
        this.dataList = res.data.data;
        this.total = res.data.total;
      })
    },
    resetData(){
      // 清空搜索内容
      this.organizationQueryVo = {};
      // 重新查询数据
      this.getList();
    },
    handleExport(){
      console.log("===导出数据===");
      axios({
        method: 'post',
        url: "http://localhost:8080/organization/export",
        responseType: 'blob', // 返回类型为数据流
        data: this.organizationQueryVo // 需要传参的话，在这传
      }).then(res => {
        if (res && res.data) {
          // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
          fileDownload(res.data, "机构数据.xlsx")
        }
      })
    },
    // 每页记录数发生变化
    handleSizeChange(size){
      this.pageSize = size;
      this.getList();
    },
    // 当前页发生变化
    handleCurrentChange(current){
      this.currentPage = current;
      this.getList();
    },
    // 删除数据
    handleRemove(organizationId){
      console.log("======" + organizationId)
      this.$confirm("是否确认删除数据", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'})
        .then(() => {
          // 表示点击了确定
          organization.remove(organizationId).then(res => {
            // 弹出成功的提示信息
            this.$message.success(res.message);
            // 重新加载数据
            this.getList();
          });
        })
        .catch(() => {
          // 表示点击了取消
          this.$message.info("取消删除操作");
        });
    },
    handleChangeStatus(val, organizationId){
      console.log("===========", val);
      console.log("===========", organizationId);
      // TODO
      organization.modifyStatusById(organizationId).then(res => {
        this.$message.success(res.message);
      })
    },

  }
}
</script>
